<template>
  <div class="wrap">
        <div class="title">{{ title }}</div>
        <div class="clock-wrap">
            <span class="clock-value">{{day}}</span>
            <span class="clock-label">天</span>
            <span class="clock-value">{{hour}}</span>
            <span class="clock-label">时</span>
            <span class="clock-value">{{minute}}</span>
            <span class="clock-label">分</span>
        </div>                
    </div>
</template>

<script>
import { reactive, toRefs, computed, onMounted, onUpdated, onBeforeUnmount } from 'vue'
export default {
    name: 'LotteryCountDown',
    props: {
      prizes: {
        type: Object
      }
    },
    setup(props) {
      const params = reactive({
        timer: null,
        day: 0,
        hour: 0,
        minute: 0,
        hasPrizes: computed(() => !!props.prizes),
        title: computed(() => {
          let data = '开奖倒计时'
          if (params.hasPrizes) {
            const status = props.prizes.status
            switch(status) {
              case 0:
                  data = '开奖倒计时'
                  break
              case 1:
                  data = '正在开奖中...'
                  break
              case -1:
                  data = '该抽奖活动已失效'
                  break
              default:
                  data = '开奖倒计时'
            }
          }
          return data
        }),
        openTime: computed(() => props.prizes?.lottery_time ?? 0)
      })

      const addZero = val => {
        return (val + '').padStart(2, '0')
      }
      const countTime = () => {
          const nowTime = Math.ceil(new Date().getTime() / 1000)
          const diff = params.openTime - nowTime
          let diffDate = Math.floor(diff / 60 / 60 / 24)
          diffDate = diffDate < 0 ? 0 : diffDate
          let diffHour = Math.floor((diff - 24 * diffDate * 60 * 60) / 60 / 60)
          diffHour = diffHour < 0 ? 0 : diffHour
          let diffMinute = Math.ceil((diff - 24 * diffDate * 60 * 60 - 60 * diffHour * 60) / 60)
          diffMinute = diffMinute < 0 ? 0 : (diffMinute > 59 ? 59 : diffMinute)
          params.day = addZero(diffDate)
          params.hour = addZero(diffHour)
          params.minute = addZero(diffMinute)            
      }
      const start = () => {
        countTime()
        params.timer = setInterval(() => {
          countTime()
        }, 30000)
      }
      const stop = () => {
        clearInterval(params.timer)
        params.timer = null
      }

      onMounted(() => {
        start()
      })

      onUpdated(() => {
        stop()
        if (props.prizes.status === 0) {
          start()
        }  
      })

      onBeforeUnmount(() => {
        stop()
      })

      return {
        ...toRefs(params)
      }
    }
}
</script>

<style lang="scss" scoped>
    .wrap {
        padding: 10px;
        @include border1px(#e7e7e7, 1px 0);
    }
    .title{
        padding: 2px 0 10px;
        font-size: 15px;
        text-align: center;
    }
    .clock-wrap{
        display: flex;
        align-items: center;
        justify-content: center;        
        .clock-value {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;        
            width: 40px;
            height: 50px;    
            font-size: 24px;
            font-weight: bold;
            color: $theme-color;
            @include border1px(#ccc, 1px);
        }
        .clock-label {
            padding: 0 6px;
            font-size: 12px;
            color: $color-text-secondary;
        }
    }
</style>